import 'package:aone_common/common.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:prototype/theme/custom_theme.dart';
import 'package:prototype/views/authenticate/authenticate_controller.dart';
import 'package:prototype/views/authenticate/widgets/login_form.dart';
import 'package:prototype/views/authenticate/widgets/register_form.dart';
import 'package:sliver_tools/sliver_tools.dart';

class AuthView extends GetView<AuthViewController> {
  const AuthView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put<AuthViewController>(AuthViewController());
    Get.put<LoginLogic>(LoginLogic(
      onSuccess: () => Get.back(),
    ));
    Get.put(RegisterLogic(
      onSuccess: () => Get.back(),
    ));

    return Scaffold(
      backgroundColor: stringToColor('333f50'),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            _buildLoginTopArea(),
            _buildPinnedTabBar(),
          ];
        },
        body: Container(
          decoration: BoxDecoration(
            color: CustomTheme.colorSchema.backgroundColor,
          ),
          child: TabBarView(
            controller: controller.tabController,
            children: [
              const RegisterForm(),
              loginForm(context),
            ],
          ),
        ),
      ),
    );
  }

  // 顶部区域
  Widget _buildLoginTopArea() {
    final globalState = Get.find<GlobalService>().state;

    return SliverToBoxAdapter(
      child: SizedBox(
        height: 180.h,
        child: Stack(
          children: [
            Container(
              decoration: const BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage(
                    'assets/images/login/headerBG.png',
                  ),
                ),
              ),
            ),
            AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0,
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.only(top: 35.0.h),
                child: CachedNetworkImage(
                  imageUrl: globalState.siteItems.logoSquare!,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  // Sticky Tab Bar
  SliverPinnedHeader _buildPinnedTabBar() {
    return SliverPinnedHeader(
      child: Container(
        decoration: BoxDecoration(
          color: CustomTheme.colorSchema.backgroundColor,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(35),
            topRight: Radius.circular(35),
          ),
        ),
        child: SafeArea(
          left: false,
          right: false,
          bottom: false,
          minimum: EdgeInsets.only(top: 20.h),
          child: Padding(
            padding: EdgeInsets.only(
              left: 35.w,
              right: 35.w,
            ),
            child: DecoratedBox(
              decoration: BoxDecoration(
                  border: Border(
                bottom: BorderSide(
                  color: CustomTheme.colorSchema.tertiary,
                  width: 2.5,
                ),
              )),
              child: TabBar(
                controller: controller.tabController,
                tabs: [
                  Tab(
                    child: Text(
                      'register'.tr,
                      style: TextStyle(
                        fontSize: 15.sp,
                      ),
                    ),
                  ),
                  Tab(
                    child: Text(
                      'login'.tr,
                      style: TextStyle(
                        fontSize: 15.sp,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
